<script setup>
import { ref, onMounted } from 'vue';

// 定义props
const props = defineProps({
  // 通过position来设置初始定位
  position: {
    type: Object,
    default: () => ({
      top: "32.25rem",
      left: "0"
    })
  }
});

// 组件名称（使用defineOptions）
// 注意：在高版本Vue 3中可以使用，如果不支持，请移除此行
// defineOptions({ name: 'homeDragbtn' });

// 响应式状态
const menuOpen = ref(false);      //  菜单展开状态
const mouseDownState = ref(false);    //  鼠标点击状态
const iX = ref(0);
const iY = ref(0);
const dX = ref(0);
const dY = ref(500);   //  初始定位
const lastMoveIndex = ref(0);    //  拖拽计数
const curMoveIndex = ref(0); //  历史计数

// 模板引用
const pageDiv = ref(null);
const actionMgr = ref(null);

// 鼠标按下
const demo_down = (event) => {
  //  如果打开了菜单，则不做响应
  if (menuOpen.value) {
    mouseDownState.value = false;
    return;
  }
  console.log("demo_down", event);
  /* 此处判断  pc 或 移动端 得到 event 事件 */
  var touch;
  if (event.touches) {
    touch = event.touches[0];
  } else {
    touch = event;
  }
  // 鼠标点击 面向页面 的 x坐标 y坐标
  let { clientX, clientY } = touch;
  // 鼠标x坐标 - 拖拽按钮x坐标  得到鼠标 距离 拖拽按钮 的间距
  iX.value = clientX - actionMgr.value.offsetLeft;
  // 鼠标y坐标 - 拖拽按钮y坐标  得到鼠标 距离 拖拽按钮 的间距
  iY.value = clientY - actionMgr.value.offsetTop;
  // 设置当前 状态为 鼠标按下
  mouseDownState.value = true;
};

// 鼠标拖拽
const demo_move = (event) => {
  //鼠标按下 切移动中
  if (mouseDownState.value) {
    console.log("demo_move", event);
    /* 此处判断  pc 或 移动端 得到 event 事件 */
    var touch;
    if (event.touches) {
      touch = event.touches[0];
    } else {
      touch = event;
    }
    // 鼠标移动时 面向页面 的 x坐标 y坐标
    let { clientX, clientY } = touch;
    //当前页面全局容器 dom 元素  获取容器 宽高
    let {
      clientHeight: pageDivY,
      clientWidth: pageDivX
    } = pageDiv.value;
    /* 鼠标坐标 - 鼠标与拖拽按钮的 间距坐标  得到 拖拽按钮的 左上角 x轴y轴坐标 */
    let [x, y] = [clientX - iX.value, clientY - iY.value];

    //拖拽按钮 dom 元素  获取 宽高 style 对象
    let {
      clientHeight: actionMgrY,
      clientWidth: actionMgrX,
      style: actionMgrStyle
    } = actionMgr.value;
    /* 此处判断 拖拽按钮 如果超出 屏幕宽高 或者 小于
       设置 屏幕最大 x=全局容器x y=全局容器y 否则 设置 为 x=0 y=0
    */
    if (x > pageDivX - actionMgrX) x = pageDivX - actionMgrX;
    else if (x < 0) x = 0;
    if (y > pageDivY - actionMgrY) y = pageDivY - actionMgrY;
    else if (y < 0) y = 0;
    dX.value = x;
    dY.value = y;
    // 计算后坐标  设置 按钮位置
    actionMgrStyle.left = `${x}px`;
    actionMgrStyle.top = `${y}px`;
    actionMgrStyle.bottom = "auto";
    actionMgrStyle.right = "auto";
    //  move Index
    lastMoveIndex.value++;
    //  当按下键滑动时， 阻止屏幕滑动事件
    event.preventDefault();
  }
};

// 鼠标抬起
const demo_up = (event) => {
  console.log("demo_up", event);
  //  当前页面全局容器 dom 元素  获取容器 宽高
  let {
    clientHeight: windowHeight,
    clientWidth: windowWidth
  } = document.documentElement;
  console.log('全局容器:', windowWidth, windowHeight);
  //  拖拽按钮 dom 元素  获取 宽高 style 对象
  let {
    clientHeight: actionMgrY,
    clientWidth: actionMgrX,
    style: actionMgrStyle
  } = actionMgr.value;

  console.log('拖拽按钮', actionMgrY, actionMgrX, actionMgrStyle);

  // 计算后坐标  设置 按钮位置
  if (dY.value > 0 && dY.value < (windowHeight - 50)) { //  不在顶部 且 不在底部
    if (dX.value <= (windowWidth / 2)) {  //  left 小于等于屏幕一半
      actionMgrStyle.left = 0;
      actionMgrStyle.right = 'auto';
    } else { //  left 大于屏幕一半
      actionMgrStyle.left = 'auto';
      actionMgrStyle.right = 0;
    }
    if (dY.value >= (windowHeight / 2)) {   //  宽度大于1/2时，是将top改为auto，调整bottom
      actionMgrStyle.top = 'auto';
      actionMgrStyle.bottom = (windowHeight - dY.value - 50) + 'px';
    }
  } else {
    if (dY.value === 0) {  //  在顶部
      actionMgrStyle.top = 0;
      actionMgrStyle.bottom = 'auto';
    } else if (dY.value === (windowHeight - 50)) {
      actionMgrStyle.bottom = 0;
      actionMgrStyle.top = 'auto';
    }
    if (dX.value >= (windowWidth / 2)) {  //  右侧是将left改为auto，调整right
      actionMgrStyle.left = 'auto';
      actionMgrStyle.right = (windowWidth - dX.value - 50) + 'px';
    }
  }
  mouseDownState.value = false;
};

// 单击事件
const demo_click = () => {
  console.log("demo_click|moveIndex:", lastMoveIndex.value, curMoveIndex.value);
  //  mouseup 后会激活click事件
  //  如果上一次down事件到下一次click事件中经历10次以下move，则视为纯点击事件
  if (lastMoveIndex.value - curMoveIndex.value <= 10) {
    //  点击事件
    menuOpen.value = !menuOpen.value;
    if (menuOpen.value) {
      //  打开菜单
    }
  }
  curMoveIndex.value = lastMoveIndex.value;
};

// 点击空白关闭菜单
const closeOpenModal = () => {};
</script>

<template>
    <div ref="pageDiv" @mousemove="demo_move" @mouseup="demo_up"
           :class="{'zlevelTop':mouseDownState}"
           style="position: absolute;top: 0;height: 100%;width: 100%">
        <!--  点击蒙版  -->
        <div v-if="menuOpen"  @click.stop="closeOpenModal"
        style="position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 998"></div>
        <!--  多功能菜单 -->
        <div :class="{'six-more-modal-btn':menuOpen,'moreModal':!menuOpen,'more-tran-animate':!mouseDownState}"
             ref="actionMgr" :style="position"  @mousedown="demo_down">
            <!--  触发器 -->
            <div v-if="!menuOpen" @click="demo_click" class="imgMore">
                <img class="more-img" src="" alt="" title="多功能菜单"/>
            </div>
            <!--  菜单  -->
            <div v-else></div>
        </div>
    </div>
</template>
